<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="home" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>数据分析</title>
<jsp:include page="../../../common/common.jsp"></jsp:include>
</head>
<body>

	<canvas id="myLineChart" style="display: block; height: 120px; width: 500px;"></canvas>
	<canvas id="myBarChart" style="display: block; height: 120px; width: 500px;"></canvas>

	<script>
		$(function() {

			$.ajax({
						url : '${home}/api/admin/basic/statistic/queryByCriteriaList.do',
						type : 'GET',
						success : function(data) {
							console.log(data);
							if (data.code == 200) {

								var userName = [];
								var optTime = [];
								var times = [];

								//开始组装图表数据
								$.each(data.data, function() {

									userName.push(this.logUser);
									optTime.push(this.logUser + "   "
											+ this.createTime);
									times.push(this.times);

								})

								new Chart(document.getElementById("myLineChart"),{
									"type" : "line",
									"data" : {
										"labels" : optTime,
										"datasets" : [ {
											"label" : "operation statistic",
											"data" : times,
											"fill" : false,
											"borderColor" : "rgb(75, 192, 192)",
											"lineTension" : 0.1
										} ]
									},
									"options" : {}
								});

								new Chart(document.getElementById("myBarChart"),{
									"type" : "bar",
									"data" : {
										"labels" : optTime,
										"datasets" : [ {
											"label" : "operation statistic",
											"data" : times,
											"fill" : false,
											"backgroundColor" : [ "rgba(255, 99, 132, 0.2)",
												"rgba(255, 159, 64, 0.2)",
												"rgba(255, 205, 86, 0.2)",
												"rgba(75, 192, 192, 0.2)",
												"rgba(54, 162, 235, 0.2)",
												"rgba(153, 102, 255, 0.2)",
												"rgba(201, 203, 207, 0.2)" ],
											"borderColor" : [ "rgb(255, 99, 132)", "rgb(255, 159, 64)",
												"rgb(255, 205, 86)", "rgb(75, 192, 192)",
												"rgb(54, 162, 235)", "rgb(153, 102, 255)",
												"rgb(201, 203, 207)" ],
											"borderWidth" : 1
										} ]
									},
									"options" : {
										"scales" : {
											"yAxes" : [ {
												"ticks" : {
													"beginAtZero" : true
												}
											} ]
										}
									}
								});

							} else {

							}
						}
					});

		})

	</script>
</body>
</html>